<template>
    <div class="wrapper">
        <div class="status-bar" :style="{'height': statusHeight}"></div>
        <scroller :show-scrollbar="false" class="home_content">
            <slider class="slider" interval="3000" auto-play="true">
                <div v-for="img in bannerList" v-if="img.pic">
                    <image class="content_first_img" resize="contain" :src="img.pic"></image>
                    <wxc-noticebar class="content_noticebar"  :notice="img.content" ></wxc-noticebar>
                </div>
            </slider>
            <div class="funWrp">
                <div class="funItem" @click="toMaintBuity(1)">
                    <text class="iconfontStyle iconfont">&#xe628;</text>
                    <text class="content_middle_text">保养维修</text>
                </div>
                <div class="funItem" @click="toMaintBuity(2)">
                    <text class="iconfontStyle iconfont">&#xe61b;</text>
                    <text class="content_middle_text">洗车美容</text>
                </div>
                <!-- <div class="funItem" @click="toInsurance">
                    <text class="iconfontStyle iconfont">&#xe629;</text>
                    <text class="content_middle_text">汽车保险</text>
                </div> -->
                <div class="funItem" @click="toRescue">
                    <text class="iconfontStyle iconfont">&#xe624;</text>
                    <text class="content_middle_text">救援服务</text>
                </div>
                <!--<div class="funItem" @click="toMaintBuity(3)">-->
                    <!--<text class="iconfontStyle iconfont">&#xe63b;</text>-->
                    <!--<text class="content_middle_text">车辆检测</text>-->
                <!--</div>-->
                <div class="funItem" @click="driving">
                    <text class="iconfontStyle iconfont">&#xe603;</text>
                    <text class="content_middle_text">找代驾</text>
                </div>
                <!--<div class="funItem" @click="cantuse">-->
                    <!--<text class="iconfontStyle iconfont">&#xe607;</text>-->
                    <!--<text class="content_middle_text">事故处理</text>-->
                <!--</div>-->
                <!--<div class="funItem" @click="cantuse">-->
                    <!--<text class="iconfontStyle iconfont">&#xe611;</text>-->
                    <!--<text class="content_middle_text">我要加油</text>-->
                <!--</div>-->
                <!-- <div class="funItem" @click="toSpendmoney">
                    <text class="iconfontStyle iconfont">&#xe60f;</text>
                    <text class="content_middle_text">我要用钱</text>
                </div> -->
            </div>
        </scroller>
        <div ref="ball" class="ball" @touchstart="onPanStart" @click="callPhone('400 0475 000')">
            <!--<text class="iconfontStyle1 iconfont">&#xe633;</text>-->
            <image class="ball_img" src="bmlocal://assets/acw/ball.jpg"></image>
        </div>
    </div>
</template>
<script>
    import { wxcNoticebar } from 'weex-ui'
    import Binding from 'weex-bindingx';
    //如果 selltype 为 0，则为平台（后台）； 如果 为 1，则为 个人； 如果为 2，则为 商家，
    export default {
        mounted() {
        },
        created () {
            this.getBannerList()
        },
        components: { wxcNoticebar },
        data() {
            return {
                x: 0,
                y: 0,
                isInAnimation: false,
                gesToken: 0,
                bannerList: [],
                services: [],
                serviceLength: 0,
                statusHeight: Number.parseInt(this.statusBarHeight || weex.config.env.statusBarHeight || 40),
                token: '',
                infoObj: {},
                isShowLoad: false,
            }
        },
        methods: {
            // 查询轮播图
            getBannerList () {
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'banner.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    data: {
                        "position":2,
                        "page": 1,
                        "limit": 5,
                        "sort": 'add_time',
                        "order": 'desc'
                    }
                }).then(resData => {
                    // 成功回调
                    console.log('------------查询轮播图-------------------------', resData)
                    if(resData && resData.errno == 0){
                        this.bannerList = resData.data.items
                    }
                }, error => {
                    // 错误回调
                    console.log(error)
                })
            },
            callPhone (phone) {
                this.$coms.call(phone)
            },
            //浮标
            getEl: function(e) {
                return e.ref;
            },
            onPanStart: function(e) {
                if (this.isInAnimation === true) {
                    console.log("we are in animation, drop pan gesture...")
                    if (this.gesToken != 0) {
                        Binding.unbind({
                            eventType: 'pan',
                            token: this.gesToken
                        })
                        this.gesToken = 0;
                    }
                    return
                }
                var my = this.getEl(this.$refs.ball);
                var expression_x_origin = `x+${this.x}`;
                var expression_y_origin = `y+${this.y}`;
                var gesTokenObj = Binding.bind({
                    anchor: my,
                    eventType: 'pan',
                    props: [{
                        element: my,
                        property: 'transform.translateX',
                        expression: expression_x_origin
                    },
                        {
                            element: my,
                            property: 'transform.translateY',
                            expression: expression_y_origin
                        }
                    ]
                }, (e) => {
                    if (e.state === 'end') {
                        this.x += e.deltaX;
                        this.y += e.deltaY;
                        //anim
                        // this.bindTiming();
                    }
                })
                this.gesToken = gesTokenObj.token;
            },
            bindTiming: function() {
                this.isInAnimation = true;
                var my = this.getEl(this.$refs.ball);
                //should equal with timing duration
                var exit_origin = "t>1000";
                var changed_x;
                var final_x;
                var final_y;
                if (this.x > (750 - 50 * 2) / 2) { //right
                    changed_x = 550 - this.x;
                    final_x = 550;
                } else {
                    changed_x = 0 - this.x;
                    final_x = 0;
                }
                var totalHeight = 1000;
                var changed_y;
                if (this.y > totalHeight / 2) {
                    changed_y = totalHeight - 200 - this.y;
                    final_y = totalHeight - 200;
                } else {
                    changed_y = 0 - this.y;
                    final_y = 0;
                }
                var expression_x = `easeOutElastic(t,${this.x},${changed_x},1000)`;
                var expression_y = `easeOutElastic(t,${this.y},${changed_y},1000)`;
                var result = Binding.bind({
                    eventType: 'timing',
                    exitExpression: exit_origin,
                    props: [{
                        element: my,
                        property: 'transform.translateX',
                        expression: expression_x
                    },
                        {
                            element: my,
                            property: 'transform.translateY',
                            expression: expression_y
                        }
                    ]
                }, (e) => {
                    if (e.state === 'end' ||
                        e.state === 'exit') {
                        // reset x & y
                        this.x = final_x;
                        this.y = final_y;
                        this.isInAnimation = false;
                    }
                })
            },
            // 返回
            back () {
                this.$router.back();
            },
            // 提示
            cantuse () {
                this.$notice.toast({ message: "开发中，敬请期待..."})
            },
            // 找代驾提示
            driving () {
                this.$notice.toast({ message: "该城市暂未开放此项服务"})
            },
            // 跳转维修保养页面
            toMaintBuity (type) {
                // this.$notice.alert({
                //     message:JSON.stringify(type)
                // })
                if(type==1){
                    this.$router.open({
                        name: 'acw.service.maintennace.maintennace',
                        type: 'PUSH',
                        params: {
                            'typ':JSON.stringify(type)
                        }
                    });
                }else if(type==2){
                    this.$router.open({
                        name: 'acw.service.maintennace.carbeauty',
                        type: 'PUSH',
                        params: {
                            'typ':JSON.stringify(type)
                        }
                    });
                }
                // else if(type==3){
                //     this.$router.open({
                //         name: 'acw.service.inspection',
                //         type: 'PUSH',
                //         params: {
                //             'typ':JSON.stringify(3)
                //         }
                //     });
                // }

            },
            // 汽车保险页面
            toInsurance () {
                this.$router.open({
                    name: 'acw.service.insurance',
                    type: 'PUSH',
                });
            },
            // 汽车保险页面
            toSpendmoney () {
                this.$router.open({
                    name: 'acw.service.spendmoney',
                    type: 'PUSH',
                });
            },
            // 汽车保险页面
            toRescue () {
                this.$router.open({
                    name: 'acw.service.rescue',
                    type: 'PUSH',
                });
            }
        }
    }
</script>
<style>
    .iconfont {
        font-family: iconfont;
    }
    .wrapper {
        background-color: #f4f4f4;
    }
    .home_content{
        width: 750px;
    }
    .funWrp {
        flex: 1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    .funItem{
        width: 375px;
        height: 200px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #c0c0c0;
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color: #c0c0c0;
    }

    .funItemTop {
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #c0c0c0;
        margin-top: 1px;
    }

    .status-bar {
        width: 750px;
        height: 40px;
        background-color: #fff;
    }
    .content_middle_text{
        font-size: 30px;
        color: #666;
    }
    .iconfont {
        font-family: iconfont;
    }
    .iconfontStyle {
        font-size: 80px;
        color: #666;
    }
    .slider{
        height: 460px;
        background-color: #fff;
    }
    .content_first_img{
        height: 400px;
    }
    .content_noticebar{
        height: 60px;
    }
    .ball {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        background-color: #fff;
        /* margin: 48px; */
        position:absolute;
        right:8px;
        bottom:68px;
        box-shadow: 0 0 15px #1E90FF;
        padding:10px;
    }
    .iconfontStyle1 {
        font-size: 70px;
        text-align:center;
        color: #1E90FF;

    }
    .ball_img{
        width: 80px;
        height: 80px;
    }
</style>
